<template>
	<div>
		<el-drawer size="57%" :visible.sync="drawer" direction="rtl" append-to-body @close="close">
			<template v-slot:title>
				<div class="topTitle">
					<p>申请媒体平台应用帮助手册</p>
				</div>
			</template>
			<div class="box">
				<div class="topMenu">
					<el-button :type="btnLock ? 'primary' : ''" @click="getJl" size="medium"
						>巨量引擎</el-button
					>
					<el-button :type="btnLock ? '' : 'primary'" @click="getTx" size="medium"
						>腾讯广告</el-button
					>
				</div>
				<div class="contentBox mt40">
					<div class="headerBox" v-if="btnLock">
						<p>本章节为您介绍如何成为Marketing API开发者</p>
						<p>
							在调用Marketing
							API前您必须先注册成为开发者、创建应用并申请对应接口权限。以下将分别为您介绍注册、创建应用、获取权限的具体流程。
						</p>
						<p>请注意重点关注文档中加粗、标注部分的描述。</p>
					</div>
					<div class="headerBox" v-else>
						<p>
							申请媒体平台应用帮助手册关闭本节将为您介绍如何成为Marketing
							API开发者，开启您的智能化营销体验生活。
						</p>
						<p>
							在调用Marketing
							API接口前，您必须先注册成为开发者并创建应用申请对应的接口权限。以下将分别为您介绍开发者注册以及应用创建的具体流程。请您重点关注文档中加粗、变色部分的描述。
						</p>
					</div>
					<div class="content" v-if="btnLock">
						<div class="first mt40">
							<div class="title">
								<div class="circular">1</div>
								<p>如何注册成为开发者？</p>
							</div>
							<div class="text">
								<p>在使用Marketing API接口功能前，需要您先注册成为开发者</p>
								<p>
									<span class="fontW">Step1：</span>进入注册页面
									<a
										href="https://open.oceanengine.com/register.html"
										target="_blank"
										class="color"
										>【点击跳转】</a
									>
									。点击开放平台官网左下角【注册】按钮即可进入
								</p>
								<p class="fontW">Tips:</p>
								<p class="fontW">
									对于企业开发者，建议使用公司邮箱账户进行注册，并妥善管理，一个公司信息仅能注册认证一个开发者账户
								</p>
								<div>
									<el-image
										style="width: 425px;height: 250px;"
										src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1726.png"
										:preview-src-list="[
											'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1726.png'
										]"
									>
									</el-image>
								</div>
								<p class="fontW">Tips:</p>
								<p>
									1、填写您期望用于后续接收开放平台短信/邮件通知的手机号/邮箱信息，与注册开发者账号时填入的手机号/信息不需要保持一致
								</p>
								<p>2、该部分需完成企业信息填写，并完成企业打款认证</p>
								<p class="fontW">
									3、完成合同签订后，请在【账号信息】界面激活您的信息接收邮箱，并可添加新的联系人信息用于接收通知
								</p>
							</div>
						</div>
						<div class="second mt40">
							<div class="title">
								<div class="circular">2</div>
								<p>如何创建应用程序并申请权限</p>
							</div>
							<div class="text">
								<p style="font-size: 19px;margin-top: 10px;">2.1 应用程序创建</p>
								<p>
									<span class="fontW">Step1：</span
									>进入开发者管理后台，【应用管理-基础应用】页面，点击<span
										class="color fontW"
										>【添加应用】</span
									>按钮
								</p>
								<div>
									<el-image
										style="width: 425px;height: 250px;"
										src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1737.png"
										:preview-src-list="[
											'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1737.png'
										]"
									>
									</el-image>
								</div>
								<p>
									<span class="fontW">Step2：</span>进入创建应用页面，填写以下信息
								</p>
								<ul class="secondStep2">
									<li>应用名称：应用程序的名称（2-50个字符）</li>
									<li>
										应用图标：推荐尺寸72*72，要求同比例尺寸、大小1M以内，格式支持jpg、png
									</li>
									<li>
										应用描述：填写详细的应用描述，如统一管理广告账户，查看账户数据等
									</li>
									<li>
										回调地址：<span
											class="color"
											style="text-decoration: underline;"
											>https://adxh.xmzmmr.com/Auth/callback</span
										>
										<el-button
											type="primary"
											style="margin-left: 10px;"
											v-clipboard:copy="
												'https://adxh.xmzmmr.com/Auth/callback'
											"
											>点击复制网址
										</el-button>
									</li>
									<li>申请权限：<span class="color fontW">全勾</span></li>
									<li>
										应用角色：<span class="color fontW">第三方平台服务</span>
									</li>
								</ul>
								<p>
									<span class="fontW">Step3：</span
									>填写确认提交后，巨量将在一个工作日内审核完成应用创建（APPID）申请
								</p>
							</div>
						</div>
						<div class="third mt40">
							<div class="title">
								<div class="circular">3</div>
								<p>创建完应用后等待审核通过，填入应用信息到SAAS系统</p>
							</div>
							<div class="text">
								<el-image
									style="width: 425px;height: 250px;"
									src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1764.png"
									:preview-src-list="[
										'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1764.png'
									]"
								>
								</el-image>
							</div>
						</div>
					</div>
					<div class="content" v-else>
						<div class="first mt40">
							<div class="title">
								<div class="circular">1</div>
								<p>如何注册成为开发者？</p>
							</div>
							<div class="text">
								<p>在使用Marketing API接口功能前，需要您先注册成为开发者</p>
								<p>
									<span class="fontW">Step1：</span>进入注册页面
									<a
										href="https://open.oceanengine.com/register.html"
										target="_blank"
										class="color"
										>【点击跳转】</a
									>
									。点击开放平台官网左下角【注册】按钮即可进入
								</p>
								<p>
									<span class="fontW">Step2：</span
									>关联QQ号作为开发者登录凭证。进入注册页面后，如果当前电脑已经登录QQ客户端，则默认显示以当前登录QQ号作为快捷登录，您也可以点击“帐号密码登录”换用其他QQ号；
								</p>
								<p class="fontW">Tips:</p>
								<p class="fontW">
									关联QQ号是开发者登录的唯一凭证，且不能进行修改。对于企业开发者，建议使用公用QQ帐号进行注册，并妥善保管
								</p>
								<div>
									<el-image
										style="width: 425px;height: 250px;"
										src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1784.png"
										:preview-src-list="[
											'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1784.png'
										]"
									>
									</el-image>
								</div>
								<p>
									<span class="fontW">Step3：</span
									>完善开发者资料。将资料填写完整并通过手机验证码验证通过后，即完成开发者注册。
								</p>
								<div>
									<el-image
										style="width: 425px;height: 250px;"
										src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1831.png"
										:preview-src-list="[
											'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1831.png'
										]"
									>
									</el-image>
								</div>
							</div>
						</div>
						<div class="second mt40">
							<div class="title">
								<div class="circular">2</div>
								<p>如何创建应用程序并申请权限</p>
							</div>
							<div class="text">
								<p style="font-size: 19px;margin-top: 10px;">2.1 应用程序创建</p>
								<p>
									<span class="fontW">Step1：</span
									>进入开发者管理后台，【应用管理-基础应用】页面，点击<span
										class="color fontW"
										>【添加应用】</span
									>按钮
								</p>
								<div>
									<el-image
										style="width: 425px;height: 250px;"
										src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1812.png"
										:preview-src-list="[
											'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1812.png'
										]"
									>
									</el-image>
								</div>
								<p>
									<span class="fontW">Step2：</span>进入创建应用页面，填写以下信息
								</p>
								<ul class="secondStep2">
									<li>应用角色：<span class="color fontW">第三方应用</span></li>
									<li>应用图标：限JPG、PNG格式，360*360px，≤5MB</li>
									<li>应用名称：应用程序的名称（2-50个字符）</li>
									<li>
										应用介绍：填写详细的应用描述，如统一管理广告账户，查看账户数据等
									</li>
									<li>
										回调地址：<span
											class="color"
											style="text-decoration: underline;"
											>https://adxh.xmzmmr.com/Auth/callback</span
										>
										<el-button
											type="primary"
											style="margin-left: 10px;"
											v-clipboard:copy="
												'https://adxh.xmzmmr.com/Auth/callback'
											"
											>点击复制网址
										</el-button>
									</li>
									<li>Access Token：<span class="color fontW">永不过期</span></li>
									<li>
										Refresh Token：<span class="color fontW">永不过期</span>
									</li>
									<li>申请权限：<span class="color fontW">全勾</span></li>
								</ul>
								<p>
									<span class="fontW">Step3：</span
									>填写确认提交后，第三方应用则会在2-3个工作日内进行审核
								</p>
							</div>
						</div>
						<div class="third mt40">
							<div class="title">
								<div class="circular">3</div>
								<p>创建完应用后等待审核通过，填入应用信息到SAAS系统</p>
							</div>
							<div class="text">
								<el-image
									style="width: 425px;height: 250px;"
									src="https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1764.png"
									:preview-src-list="[
										'https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1764.png'
									]"
								>
								</el-image>
							</div>
						</div>
					</div>
					<div class="footer">
						<el-button class="btn" @click="close">关闭</el-button>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
export default {
	name: "Tips",
	data() {
		return {
			drawer: false,
			btnLock: 1
		};
	},
	methods: {
		open() {
			this.drawer = true;
		},
		close() {
			this.drawer = false;
			this.btnLock = 1;
		},
		getJl() {
			this.btnLock = 1;
		},
		getTx() {
			this.btnLock = 0;
		}
	}
};
</script>
<style lang="scss" scoped>
.topTitle {
	font-weight: 700;
	font-size: 18px;
	color: #333;
	border-bottom: 1px solid #e5e6eb;
	text-align: center;
	height: 40px;
}

::deep .el-dialog__headerbtn {
	position: absolute;
	top: 0px !important;
}

.box {
	padding: 0 20px;

	.fontW {
		font-weight: 700;
	}

	.mt40 {
		margin-top: 40px;
	}

	.color {
		color: #156DFF;
	}

	a {
		text-decoration: underline;
	}

	.contentBox {
		.headerBox {
			width: 100%;
			box-sizing: border-box;
			border-left: 6px solid #d6d6d6;
			background-color: #f5f5f5;
			padding: 17px 10px;

			p {
				line-height: 30px;
			}
		}

		.content {
			.circular {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: $primary;
				line-height: 30px;
				text-align: center;
				color: #fff;
			}

			.text {
				line-height: 42px;
				font-size: 17px;
				padding-left: 1cm;
			}

			.title {
				display: flex;

				p {
					margin-left: 10px;
					font-size: 20px;
				}
			}

			.secondStep2 {
				li {
					background: url("https://img02.mockplus.cn/preview/2022-11-05/cef7a883-ad92-4f10-b759-6e3f1476de30/images/%E6%8E%A8%E5%B9%BF%E9%85%8D%E7%BD%AE/u1741.svg")
						no-repeat left center;
					padding-left: 15px;
				}
			}

			.third {
				margin-bottom: 70px;

				.text {
					margin-top: 20px;
				}
			}
		}

		.footer {
			position: fixed;
			background-color: #fff;
			border-top: 1px solid #e5e6eb;
			width: 57%;
			height: 60px;
			bottom: 0px;
			right: 0px;

			.btn {
				position: absolute;
				bottom: 15px;
				right: 20px;
			}
		}
	}
}
</style>
